<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
		b ody{
			width:100%
			height:100000000px;
			background-image: url(img/猫.gif);
			background-size:cover;
			/*函数 cover 等比例放大图片 特点：原图按照比例放大存背景空间
			【开发者：背景图大小是否等于背景空间】
			contain 等比例缩放图片 特点：图片按照比例缩放存背景空间
			【开发者：背景图等比例显示在背景图片】
			*/
		   /*背景附件--尺寸中存在cover或者contain*/
		   background-attachment:fixed;/*背景图固定 scroll 不固定
		   */
		}	
			div{
				width:300px;
				height:300px;
				background-color:#e4393c;
				background:#ffff00;  
				background-image:url(img/猫.gif);
				/*问题：超大图-不显示 小图-显示
				注意：背景空间大小，如果图小于背景空间--平铺
				*/
			   background-repeat:no-repeat; 
			   /*no-repeat 不平铺 repeat-x,y 横，纵向平铺*/
			  background-size: 30%;
			  /*背景尺寸属性值 ：数值 px %| 函数 cover contain*/
			  /*背景定位：前提背景空间大于背景图 关键字：center、left、right、top..*/
			  background-position: 80% 0;
				}
				</style>
	</head>
	<body>
		Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempore repellat quas, ad mollitia recusandae libero dignissimos voluptatibus totam ex, earum tempora? Ut sint provident ab eveniet. Cupiditate adipisci illo esse.
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse porro exercitationem quod labore recusandae id veniam ipsa, perferendis maiores omnis incidunt! Voluptates delectus ducimus dignissimos molestiae laborum blanditiis rem fugit!
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, minus obcaecati sunt quae cumque in, ducimus nesciunt repellendus tempora illum sit enim ex, aperiam odio. Quisquam cupiditate doloremque laudantium atque!
		<!-- html img 图片 引入一张图片，位置不可随意改变
		 css 背景图片  引入一张图片 ，位置可以随意改变
		 子属性 background-color 背景颜色
		        background-image 背景图
				background-repeat 背景重复
				background-size背景尺寸
				backgrund-attachment背景附件
				background-position背景定位
		 复合属性 background:background-image background-color background-position
		         background-size background-repeat和backgrund-attachment
				 
		简写属性 background:background-image background-position|background-size  
	    替代子属性 background-image、background-color background-repeat 
		 -->
		 <div></div>
	</body>
</html>